<template>
  <div class="roleList">
    <!-- 面包屑导航部分 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 -->
    <el-button>添加角色</el-button>
    <!-- 表格 -->
    <el-table :data="roleList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <!-- 这里写展开行的数据 -->
          <el-row
            v-for="first in scope.row.children"
            :key="first.id"
            style="margin-bottom:6px;border-bottom:1px dashed #ccc"
          >
            <el-col :span="4">
              <el-tag
                closable
                type="success"
                @close="delRoleId(scope.row,first.id)"
              >{{first.authName}}</el-tag>
            </el-col>
            <el-col :span="20">
              <el-row v-for="second in first.children" :key="second.id" style="margin-bottom:6px">
                <el-col :span="4">
                  <el-tag
                    closable
                    type="info"
                    @close="delRoleId(scope.row,second.id)"
                  >{{second.authName}}</el-tag>
                </el-col>
                <el-col :span="20">
                  <el-tag
                    v-for="third in second.children"
                    :key="third.id"
                    closable
                    type="warning"
                    style="margin-bottom:6px;margin-right:6px"
                    @close="delRoleId(scope.row,third.id)"
                  >{{third.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">没有任何权限，请先去分配</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="showEditUserData(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="授权分配" placement="top">
            <el-button type="primary" icon="el-icon-share" @click="showGrantDialog(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="primary" icon="el-icon-delete" @click="deletUserById(scope.row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分配权限对话框 -->
    <el-dialog title="授权角色" :visible.sync="grantdialogFormVisible">
      <el-tree ref="mytree"
        :data="rightList"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :default-checked-keys="checkedArr"
        :props="defaultProps"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="grantdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="grantRightSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllRoleList, delRightByRoleId, grantRightForRole } from '../../src/api/role_api'
import { getAllRightList } from '../../src/api/right_api'
export default {
  data () {
    return {
      roleId: '',
      checkedArr: [], // 默认被选中节点的id数组
      rightList: [],

      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      roleList: [],
      grantdialogFormVisible: false

    }

    // roleList:[
    //     {

    //     }
    // ]
  },
  methods: {
    // 点击确定按钮为角色授权
    grantRightSubmit () {
      // var arr = this.$refs.mytree.getCheckedKeys()这里的getCheckedKeys()拿不到父级id所以不能用它
      var arr = this.$refs.mytree.getCheckedNodes()
      // console.log(arr)
      // [{id:122;pid:121,101},{id:123,pid:121,101}]最终我们是要把他们拼接成一个数组
      // 遍历arr数组，拼接

      var temp = []
      for (var i = 0; i < arr.length; i++) {
        temp.push(arr[i].id + ',' + arr[i].pid)
      }
      console.log(temp)
      // 再将temp数组转换成字符串，以逗号分隔
      var str = temp.join(',')
      console.log(str)
      // 再在字符串把相同的数字去重,首先我们只有数组可以去重，所以我们又要转换成数组。再去重
      var arr2 = str.split(',')
      console.log(arr2)
      // 数组去重，可以用new set
      var finalArr = [...new Set(arr2)]
      console.log(finalArr)
      grantRightForRole(this.roleId, finalArr.join(','))
        .then(res => {
          // console.log(res)
          if (res.data.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.data.meta.msg
            })
            this.grantdialogFormVisible = false
            this.int()
          }
        })
    },
    // 角色分配授权对话框
    showGrantDialog (row) {
      this.roleId = row.id
      this.grantdialogFormVisible = true
      getAllRightList('tree').then(res => {
        console.log(res)

        this.rightList = res.data.data
      })
      // 先定义一个空数组,在遍历之前把我们删除的数据清空
      this.checkedArr.length = 0
      // 获取角色所对应的三级权限，先遍历一级，再一级一级往下遍历
      row.children.forEach((first, index) => {
        // 在这里需要判断看一级下面有没有二级权限，有的话就接着遍历
        if (first.children && first.children.length > 0) {
          // 遍历二级权限
          first.children.forEach((second) => {
            if (second.children && second.children.length > 0) {
              // 遍历三级权限
              second.children.forEach((third) => {
                this.checkedArr.push(third.id)
              })
            }
          })
        }
      })
    },
    // 这里我们要重新刷新页面不能调用int方法，因为他会刷新整个页面，我们可以在事件传参直接传scope.row下面直接接受row的传参，然后我们再
    // 用this.children=res.data.data刷新后的数据
    delRoleId (row, rightId) {
      delRightByRoleId(row.id, rightId)
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.data.meta.msg
            })
            row.children = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    int () {
      getAllRoleList()
        .then(res => {
        // console.log(res)
          if (res.data.meta.status === 200) {
            this.roleList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },

  mounted () {
    this.int()
  }
}
</script>
<style lang="less" scoped>
</style>
